<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>卡片布局案例2</title>
		<link rel="stylesheet" href="styles.css">
		<style>
				 
		/* 重置样式 */
		* {
		    margin: 0;
		    padding: 0;
		    box-sizing: border-box;
		    font-family: 'Microsoft YaHei', sans-serif;
		}
		
		body {
		    background-color: #f5f5f5; /* 背景色为浅灰色 */
		    display: flex;
		    justify-content: center;
		    align-items: center;
		    height: 100vh;  /*[居中]*/
		}
		
		/* 搜索框容器 */
		#search-container {
		    display: flex;
		    align-items: center;
		    width: 500px;
		    height: 50px;
		    background-color: white;
		    border-radius: 5px; /* 圆角效果 */
		    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1); /* 阴影效果 */
		    padding: 0 20px;
		}
		
		/* 左侧灰色文本 */
		#search-text {
		    color: #999; /* 灰色文字 */
		    font-size: 16px;
		    flex: 1; /* 使文本占据可用空间 */
		}
		
		/* 右侧红色按钮 */
		#search-button {
		    background-color: #e60012; /* 红色背景 */
		    color: white; /* 白色文字 */
		    border: none;
		    padding: 10px 20px;
		    border-radius: 2px; /* 按钮圆角 */
		    cursor: pointer;
		    font-size: 16px;
		}
		
		
	
		</style>
	</head>
	<body>
		<div id="search-container">
		        <!-- 左侧灰色文本 -->
		        <div id="search-text">搜索 京东商品</div>
		        <!-- 右侧红色按钮 -->
		        <button id="search-button">搜索</button>
		    </div>
		
	</body>
</html>